<template>
  <div>
      <button
       v-for="(item, index) in arr"
       v-bind:key="index"
       @click="selectOneFun(index)">
       {{ index }}:{{ item }}
      </button>
  </div>
  <div>你选择了【{{ selectOne }}】</div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onMounted, onUnmounted, onUpdated } from '@vue/runtime-core'
export default {
    name: 'App',
    setup () {
        console.log("1...setup()开始创建组件")

        const data = reactive({
            arr: ['Yes', 'No'],
            selectOne: '',
        })
         
        const selectOneFun = (index) => {
            data.selectOne = data.arr[index]
        }
        
        onBeforeMount(() => {
            console.log("2...onBeforeMount()组件挂在到页面之前执行")
        })

        onMounted(() => {
            console.log("3...onMounted()组件挂在到页面之后执行")
        })

        onBeforeUpdate(() => {
            console.log("4...onBeforeUpdate()在组件更新之前执行")
        })

        onUpdated(() => {
            console.log("5...onUpdated()在组件更新之后执行")
        })

        onBeforeUnmount(() => {
            console.log("6...onBeforeUnmount()在组件卸载之前执行")
        })

        onUnmounted(() => {
            console.log("7...onUnmounted()在组件卸载之后执行")
        })

        onDeactivated(() => {
            console.log("8...onDeactivated()在组件切换中旧组件消失的时候执行")
        })

        const refData = toRefs(data)
        return {
            ...refData,
            selectOneFun
        }
    }
}
</script>

<style>

</style>